<!DOCTYPE HTML>
<html>
<head>
  <title>导航定位</title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<style type="text/css">
  * {
    margin:0px;
    padding:0px;
    font-family:'微软雅黑';
  }
  div {
    height:400px;
    border:1px solid red;
    width:600px;
  }
  ul {
    overflow:hidden;
    position:fixed;
    top:300px;
    left:650px;
  }
  li {
    width:40px;
    height:40px;
    background:#3F883E;
    text-align:center;
    line-height:40px;
    color:#fff;
  ,font-size:18px;
    cursor:pointer;
    border-bottom:1px solid #fff;
  }
  li.active {
    width: 38px;
    height: 38px;
    margin-bottom: 1px;
    border: 1px solid #3F883E;
    background: #fff;
    color: #666;
  }
</style>

<body>

<div class="div1">段落1</div>

<div class="div2">段落2</div>

<div class="div3">段落3</div>

<div class="div4">段落4</div>

<div class="div5">段落5</div>

<div class="div6">段落6</div>

<div class="div7">段落7</div>

<ul>
  <li class="li1 active">1</li>
  <li class="li2">2</li>
  <li class="li3">3</li>
  <li class="li4">4</li>
  <li class="li5">5</li>
  <li class="li6">6</li>
  <li class="li7">7</li>
</ul>

<script type="text/javascript">

  /* 滚动监听 */
  // 定义一个获取所有div的距离高度
  var arrOffsetTop = [
    $('.div1').offset().top,
    $('.div2').offset().top,
    $('.div3').offset().top,
    $('.div4').offset().top,
    $('.div5').offset().top,
    $('.div6').offset().top,
    $('.div7').offset().top
  ];

  // 获取每个div的平均高度
  var fTotalHgt = 0;
  for(var i=0; i<$('div').length; i++) {
    fTotalHgt += $('div').eq(i).outerHeight();
  }
  var fAverageHgt = parseFloat(fTotalHgt / $('div').length);

  // 滚动事件(每次滚动都做一次循环判断)
  $(window).scroll(function() {
    for(var i=0; i<$('div').length; i++) {
      if($(this).scrollTop() > arrOffsetTop[i] - fAverageHgt) {  // 减去一个固定值，是定位准确点
        $('ul li').eq(i).addClass('active').siblings().removeClass('active');
      }
    }
  });

  /* 点击事件 */
  $('ul li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    $('body, html').animate({scrollTop: arrOffsetTop[$(this).index()]}, 500);
  });
</script>

</body>
</html>
